<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="case-menus-dialog" v-if="visible">
                <div class="case-menus-dialog__mask"></div>
                <div class="case-menus-dialog__content">
                    <div class="case-menus-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close-black.svg`" />
                    </div>

                    <div class="case-menus-dialog__title">
                        {{ id == 165 ? "立即体验" : "案例体验" }}
                    </div>

                    <div class="menus-list">
                        <div
                            class="menus-item"
                            :class="{ 'is-disabled': !item.url }"
                            v-for="item in list"
                            :key="item.name"
                            @click="onJump(item.url)"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import CaseList from "@/config/case.js";
const id = ref(0);
const visible = ref(false);

const list = computed(() => {
    return CaseList[id.value];
});

const onClose = () => {
    visible.value = false;
};

const onJump = (url) => {
    url && window.open(url);
};

defineExpose({
    show(_id) {
        visible.value = true;
        id.value = _id;
    },
});
</script>
<style lang="scss" scoped>
.case-menus-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 359px;
        background-color: #fff;
        border-radius: 10px;
        transform: translate(-50%, -50%);
        padding: 43px 20px 43px;
    }

    &__title {
        position: absolute;
        left: 50%;
        top: 22px;
        font-size: 18px;
        transform: translate(-50%, -50%);
    }

    .menus-list {
        .menus-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 42px;
            background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/btn-bg.png");
            background-size: 100% 100%;
            margin-top: 20px;
            font-size: 18px;
            color: #fff;
            cursor: pointer;

            &.is-disabled {
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/btn-default.png");
                color: #333;
                cursor: default;
            }
        }
    }

    &__close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
        }
    }
}
</style>
